<template>
    <div style="background: #fff !important;">
        <div style="position: fixed;width: 100%;background: #fff;z-index: 99;">
            <bar text="KPI概览"></bar>
        </div>
<!--        KPI数据-->
        <div>
            <titles style="margin-left: 15px;padding-top: 78px" text="KPI数据"></titles>
            <div class="kpiTop">
                <div class="kpiChange">
                    <p :class="kpiData == 0?'txt1':'txta'" @click="changeData1">日</p>
                    <p :class="kpiData == 1?'txt2':'txtb'" @click="changeData2">周</p>
                    <p :class="kpiData == 2?'txt3':'txtc'" @click="changeData3">月</p>
                </div>
                <div class="dataIpnut">
                    <div v-if="kpiData == 0">
                        <el-date-picker
                                id="input1"
                                @change="changeInout1"
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div v-if="kpiData == 1">
                        <el-date-picker
                                @change="changeInout2"
                                v-model="value2"
                                type="week"
                                format="yyyy 第 WW 周"
                                placeholder="选择周">
                        </el-date-picker>
                    </div>
                    <div  v-if="kpiData == 2">
                        <el-date-picker
                                @change="changeInout3"
                                v-model="value3"
                                type="month"
                                placeholder="选择月">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="kipdata">
                <div class="kipdataTop" v-if="kpiData == 0">
                    <p class="txt">KPI</p>
                    <p class="txta1">今日</p>
                    <p class="txtb1">昨日</p>
                    <p class="txtc1">较昨日</p>
                </div>
                <div class="kipdataTop" v-if="kpiData == 1">
                    <p class="txt">KPI</p>
                    <p class="txta1">本周</p>
                    <p class="txtb1">上周</p>
                    <p class="txtc1">较上周</p>
                </div>
                <div class="kipdataTop" v-if="kpiData == 2">
                    <p class="txt">KPI</p>
                    <p class="txta1">本月</p>
                    <p class="txtb1">上月</p>
                    <p class="txtc1">较上月</p>
                </div>
                <div class="kipList" v-for="(item,idx) in detailList">
                    <p v-if="idx == 0" class="kipList-name">客流量<span>(人次)</span></p>
                    <p v-if="idx == 1" class="kipList-name">集客力<span>(人/㎡)</span></p>
                    <p v-if="idx == 2" class="kipList-name">销售额<span>(元)</span></p>
                    <p v-if="idx == 3" class="kipList-name">坪效<span>(元/㎡)</span></p>
                    <p class="kipList-num1">{{item.this}}</p>
                    <p class="kipList-num2">{{item.last}}</p>
                    <p class="kipList-num3">{{item.thanlast}}%</p>
                </div>
            </div>
        </div>
<!--        KPI趋势对比-->
        <div >
            <titles style="margin-left: 15px;padding-top: 40px" text="KPI趋势对比"></titles>
            <p style="font-size: 15px;color: #666666;margin-top: 24px;margin-left: 20px;">近30天各项KPI趋势对比</p>
            <div style="display: flex;align-items: center;margin-top: 24px;margin-left: 24px;">
                <p style="width: 15px;height: 3px;background: #255ED7;border-radius: 3px;"></p>
                <p style="font-size: 12px;color: #999999;margin-left: 6px;">客流量</p>
                <p style="width: 15px;height: 3px;background: #11C3DE;border-radius: 3px;margin-left: 20px;"></p>
                <p style="font-size: 12px;color: #999999;margin-left: 6px;">集客力</p>
                <p style="width: 15px;height: 3px;background: #FBC74F;border-radius: 3px;margin-left: 20px;"></p>
                <p style="font-size: 12px;color: #999999;margin-left: 6px;">销售额</p>
                <p style="width: 15px;height: 3px;background: #65CF97;border-radius: 3px;margin-left: 20px;"></p>
                <p style="font-size: 12px;color: #999999;margin-left: 6px;">坪效</p>
            </div>
            <div>
                <div id="myChart2" :style="{width: '100%', height: '300px',margin:'-40px 0 30px -14px'}">

                </div>
            </div>
        </div>


    </div>
</template>

<script>
    import titles from "../../components/titleBar";
    import bar from "../../components/topBar2";
    import chart from "../../components/chart";
    export default {
        name: "kpi",
        data(){
            return{
                kpiData:0 ,
                value1: '',
                value2: '',
                value3: '',
                detailList:[]
            }
        },
        components: {
            titles,
            bar,
        },
        methods:{
            // 日
            changeData1(){
                this.kpiData = 0
                this.$api.get('market/data/kpiview?this=2020-02-01&last=2020-02-02&week=0' , {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        this.detailList = response.data.data
                    } else {
                        // console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            changeInout1(e){
                if ((this.value1.getMonth()+1) < 10){
                    if((this.value1.getDate()) <10){
                        var nweData = this.value1.getFullYear() + '-' + '0' +(this.value1.getMonth()+1) + '-' + '0' +this.value1.getDate()
                        var newData2 = this.value1.getFullYear() + '-' + '0' + (this.value1.getMonth()+1) + '-' + '0'+ (this.value1.getDate()-1)
                    }else{
                        if((this.value1.getDate()-1) < 10){
                            var nweData = this.value1.getFullYear() + '-' + '0' +(this.value1.getMonth()+1) + '-' + this.value1.getDate()
                            var newData2 = this.value1.getFullYear() + '-' + '0' + (this.value1.getMonth()+1) + '-' + '0' +(this.value1.getDate()-1)
                        }else{
                            var nweData = this.value1.getFullYear() + '-' + '0' +(this.value1.getMonth()+1) + '-' + this.value1.getDate()
                            var newData2 = this.value1.getFullYear() + '-' + '0' + (this.value1.getMonth()+1) + '-' + (this.value1.getDate()-1)
                        }

                    }

                }else {
                    var nweData = this.value1.getFullYear() + '-' + (this.value1.getMonth()+1) + '-' + this.value1.getDate()
                    var newData2 = this.value1.getFullYear() + '-' + (this.value1.getMonth()+1) + '-' + (this.value1.getDate()-1)
                }
                this.$options.methods.detail2.bind(this)(nweData,newData2,0);
            },
            // 周
            changeData2(){
                this.kpiData = 1
                this.$api.get('market/data/kpiview?this=2020-02-01&last=2020-01-02&week=1' , {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        this.detailList = response.data.data
                    } else {
                        // console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            changeInout2(){
                if ((this.value2.getMonth()+1) < 10){
                    if((this.value2.getDate()) <10){
                        var nweData = this.value2.getFullYear() + '-' + '0' +(this.value2.getMonth()+1) + '-' + '0' +this.value2.getDate()
                        var newData2 = this.value2.getFullYear() + '-' + '0' + (this.value2.getMonth()+1) + '-' + '0'+ (this.value2.getDate()-1)
                    }else{
                        if((this.value2.getDate()-1) < 10){
                            var nweData = this.value2.getFullYear() + '-' + '0' +(this.value2.getMonth()+1) + '-' + this.value2.getDate()
                            var newData2 = this.value2.getFullYear() + '-' + '0' + (this.value2.getMonth()+1) + '-' + '0' +(this.value2.getDate()-1)
                        }else{
                            var nweData = this.value2.getFullYear() + '-' + '0' +(this.value2.getMonth()+1) + '-' + this.value2.getDate()
                            var newData2 = this.value2.getFullYear() + '-' + '0' + (this.value2.getMonth()+1) + '-' + (this.value2.getDate()-1)
                        }

                    }

                }else {
                    var nweData = this.value2.getFullYear() + '-' + (this.value2.getMonth()+1) + '-' + this.value2.getDate()
                    var newData2 = this.value2.getFullYear() + '-' + (this.value2.getMonth()+1) + '-' + (this.value2.getDate()-1)
                }
                this.$options.methods.detail2.bind(this)(nweData,newData2,1);
            },
            // 年
            changeData3(){
                this.kpiData = 2
                this.$api.get('market/data/kpiview?this=2020-02&last=2020-03&week=0' , {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        this.detailList = response.data.data
                    } else {
                        // console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            changeInout3(){
                if ((this.value3.getMonth()+1) < 10){
                    var nweData = this.value3.getFullYear() + '-' + '0' +(this.value3.getMonth()+1)
                    var newData2 = this.value3.getFullYear() + '-' + '0' + (this.value3.getMonth())

                }else {
                    var nweData = this.value3.getFullYear() + '-' + (this.value3.getMonth()+1)
                    var newData2 = this.value3.getFullYear() + '-' + (this.value3.getMonth())
                }
                this.$options.methods.detail2.bind(this)(nweData,newData2,0);
            },
            detail(){
                this.$api.get('market/data/kpiview?this=2020-02-01&last=2020-02-02&week=0' , {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        this.detailList = response.data.data
                    } else {
                        // console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            detail2(nweData,newData2,type){
                this.$api.get('market/data/kpiview?this='+ nweData +'&last=' +  newData2 +'&week=' + type, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        this.detailList = response.data.data
                    } else {
                        // console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            // 折线图
            option() {
                let myChart = this.$echarts.init(document.getElementById('myChart2'))
                myChart.setOption({
                    color: ['#255ED7', '#11C3DE', '#FBC74F', '#65CF97'],
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                    },
                    grid: {
                        left: '0%',
                        right: '0%',
                        bottom: '0%',
                        containLabel: true
                    },
                    toolbox: {
                        // feature: {
                        //     saveAsImage: {}
                        // }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['01-05', '01-10', '01-15', '01-20', '01-25', '01-30'],
                        axisLabel : {
                            show : true,
                            textStyle : {
                                color : '#979BA2'
                            },
                            interval:0
                        },
                        axisLine:{
                            show:true,
                            lineStyle:{
                                color:'#979BA2'
                            }
                        }
                    },
                    yAxis: {
                        type: '',
                        show:false,
                    },
                    series: [{
                        data: [420, 432, 561, 654, 870, 930, 970],
                        type: 'line'
                        },
                        {
                            data: [620, 532, 401, 634, 890, 930, 820],
                            type: 'line'
                        },
                        {
                            data: [520, 232, 458, 734, 760, 990, 790],
                            type: 'line'
                        },
                        {
                            data: [350, 432, 258, 479, 582, 690, 840],
                            type: 'line'
                        }
                    ]
                })

            },

        },
        mounted() {
            this.option()
            this.detail()
        }
    }
</script>

<style scoped lang="scss">
    /deep/body{
        background: #fff !important;
    }
    /deep/.el-date-editor{
        width: 118px !important;
        height: 28px !important;
        background: #fff;
        display: flex;
        align-items: center;
    }
    /deep/.el-input__inner{
        width: 118px !important;
        height: 28px !important;
        line-height: 29px !important;
        background: #fff;
        display: block;
        align-items: center;
        padding-left: 30px !important;
        padding-right: 0 !important;
        color: #999999 !important;
    }
    /deep/.el-input__prefix{
        top:-6px !important;
    }
    /deep/.el-input__suffix{
        display: none !important;
    }
.kpiTop{
    margin-top: 20px;
    display: flex;
    align-items: center;
    margin-left: 18px;
    margin-right: 18px;
    display: flex;
    .kpiChange{
        flex: 1;
        display: flex;
        .txt1{
           width: 56px;
            height: 28px;
            background:rgba(37,94,215,1);
            box-shadow:0px 0px 5px 0px rgba(116,133,169,0.31);
            border-radius:5px 0px 0px 5px;
            font-size: 14px;
            color: #fff;
            line-height: 29px;
            text-align: center;
        }
        .txt2{
            width: 54px;
            height: 28px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 29px;
            background:rgba(37,94,215,1);
            box-shadow:0px 0px 5px 0px rgba(116,133,169,0.31);
        }
        .txt3{
            width: 56px;
            height: 28px;
            background:rgba(37,94,215,1);
            box-shadow:0px 0px 5px 0px rgba(116,133,169,0.31);
            border-radius:0px 5px 5px 0px;
            font-size: 14px;
            color: #fff;
            line-height: 29px;
            text-align: center;
        }
        .txta{
            width: 54px;
            height: 26px;
            border: 1px solid #E1E1E1;
            font-size: 14px;
            color: #999999;
            text-align: center;
            line-height: 28px;
            border-radius:5px 0px 0px 5px;
            background: #FFFFFF;
        }
        .txtb{
            width: 54px;
            height: 26px;
            border: 1px solid #E1E1E1;
            border-right-style: none;
            border-left-style: none;
            font-size: 14px;
            color: #999999;
            text-align: center;
            line-height: 28px;
            background: #FFFFFF;
        }
        .txtc{
            width: 54px;
            height: 26px;
            border: 1px solid #E1E1E1;
            border-radius:0px 5px 5px 0px;
            font-size: 14px;
            color: #999999;
            text-align: center;
            line-height: 28px;
            background: #FFFFFF;
        }
    }
    .dataIpnut{
        width: 118px;
        height: 28px;
        background: #fff;
        border-radius:5px;
        display: flex;
        align-items: center;
    }
}
.kipdata{
    width: 340px;
    height: 184px;
    border: 1px solid #E1E1E1;
    border-radius: 5px;
    margin-top: 14px;
    margin-left: 16px;
    background: #fff;
    .kipdataTop{
        height: 32px;
        width: 100%;
        display: flex;
        align-items: center;
        background: #F5F5F5;
        .txt{
            font-size: 14px;
            color: #666666;
            margin-left: 23px;
        }
        .txta1{
            font-size: 14px;
            color: #666666;
            margin-left: 73px;
        }
        .txtb1{
            font-size: 14px;
            color: #666666;
            margin-left: 52px;
        }
        .txtc1{
            font-size: 14px;
            color: #666666;
            margin-left: 44px;
        }
    }
    .kipList{
        height: 38px;
        border-bottom: 1px solid #E1E1E1;
        display: flex;
        align-items: center;
        .kipList-name{
            width: 80px;
            margin-left: 12px;
            color: #666666;
            font-size: 12px;
            span{
                font-size: 10px;
            }
        }
        .kipList-num1{
            width: 60px;
            margin-left: 10px;
            text-align: center;
            color: #255ED7;
            font-size: 13px;
        }
        .kipList-num2{
            width: 60px;
            margin-left: 20px;
            text-align: center;
            color: #666666;
            font-size: 13px;
        }
        .kipList-num3{
            color: #74C364;
            font-size: 13px;
            /*width: 60px;*/
            flex: 1;
            margin-left: 40px;
        }
        .kipList-num4{
            color: #EE6666;
            font-size: 13px;
            flex: 1;
            margin-left: 30px;
        }
    }
    .kipList:last-child{
        border-bottom: none;
    }
}



</style>
